<template>
    <div class="flex container">
        <div style="display: flex; align-items: center;height: 100%;">
            <img src="../assets/ROSUN.svg" alt="" />
        </div>
        <div class="title">
            <div class="title-zh">{{ title.zh }}</div>
            <div class="title-en">{{ title.en }}</div>
        </div>
        <div style="display: flex; align-items: center;height: 100%;">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <svg :class="{ active: false }" t="1724035332076" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9501"
                        data-spm-anchor-id="a313x.collections_detail.0.i11.138b3a81qr16Jj" width="34" height="34">
                        <path
                            d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                            p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
                    </svg>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="route(0)">成型目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(1)">原材料仓目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(2)">鞋面仓目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(3)">针车一课目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(31)">针车二课目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(32)">针车三课目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(33)">针车四课目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(4)">成品仓目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(5)">大底仓目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(6)">成型目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(7)">印线区目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(8)">电脑针车目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(9)">冲裁目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(10)">开发制一目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(11)">裁剪目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(12)">配套仓目视管理看板</el-dropdown-item>
                        <el-dropdown-item @click="route(13)">原材料仓目视管理看板2</el-dropdown-item>
                        <el-dropdown-item @click="route(14)">大底仓目视管理看板2</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-progress type="circle" :percentage="percentage" :color="colors">
                <template #default="{ percentage }">
                    <span class="percentage-value">{{ 100 - percentage }}</span>
                </template>
            </el-progress>
        </div>

        <!-- <nav class="flex TVContainer">
            <svg @click="route(0)" :class="{ active: title.index === 0 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9501"
                data-spm-anchor-id="a313x.collections_detail.0.i11.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 0"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(1)" :class="{ active: title.index === 1 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 1"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(2)" :class="{ active: title.index === 2 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 2"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(3)" :class="{ active: title.index === 3 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 3"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(4)" :class="{ active: title.index === 4 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 4"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(5)" :class="{ active: title.index === 5 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 5"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(6)" :class="{ active: title.index === 6 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 6"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(7)" :class="{ active: title.index === 7 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 7"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(8)" :class="{ active: title.index === 8 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 8"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>

            <svg @click="route(9)" :class="{ active: title.index === 9 ? true : false }" t="1724035332076" class="icon"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8667"
                data-spm-anchor-id="a313x.collections_detail.0.i0.138b3a81qr16Jj" width="34" height="34">
                <path v-if="title.index === 9"
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#ffffff"></path>
                <path v-else
                    d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32z m-40 488H136V212h752v416z"
                    p-id="9502" class="custom-cursor-on-hover" fill="#2c2c2c"></path>
            </svg>
        </nav> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, type PropType } from 'vue'
import { RouterView, useRouter } from 'vue-router'
const percentage = ref(0)
const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]
onMounted(() => {
    setInterval(() => {
        percentage.value = (percentage.value % 100) + 1
    }, 3000)
})

const props = defineProps({
    title: {
        type: Object,
        required: true,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: {
            zh: '成型目视管理看板',
            en: 'Assembly Visual Board'
        }
    }
})
//引入useRouter才能使用router.push
const router = useRouter() //创建一个对象

const route = (index: number = 0) => {
    switch (index) {
        case 0:
            router.push('/1')
            break
        case 1:
            router.push('/2')
            break
        case 2:
            router.push('/3')
            break
        case 3:
            router.push('/41')
            break
        case 31:
            router.push('/42')
            break
        case 32:
            router.push('/43')
            break
        case 33:
            router.push('/44')
            break
        case 4:
            router.push('/5')
            break
        case 5:
            router.push('/6')
            break
        case 6:
            router.push('/7')
            break
        case 7:
            router.push('/8')
            break
        case 8:
            router.push('/9')
            break
        case 9:
            router.push('/10')
            break
        case 10:
            router.push('/11')
            break
        case 11:
            router.push('/12')
            break
        case 12:
            router.push('/13')
            break
        case 13:
            router.push('/14')
            break
        case 14:
            router.push('/15')
            break
        default:
            break
    }
}


</script>

<style scoped lang="less">
:deep(.el-progress) {
    display: flex;
    align-items: center;
    margin-left: 15px;

    .el-progress-circle {
        height: 100% !important;
        width: 3vw !important;
        // transform: translateY(-10px);
    }

    .el-progress__text {
        font-size: 12px !important;
        min-width: auto;
    }
}

.container {
    padding: 0 15px;
    border-radius: 4px;
    justify-content: space-between;
    width: 100%;
    height: 7vh;
    background-color: white;

    .title {
        // transform: translateX(4vw);
        display: flex;
        flex-direction: column;
        align-items: center;

        .title-zh {
            font-size: 22px;
            font-weight: 600;
            color: #ff7700;
        }

        .title-en {
            transform: translateY(-5px);
            font-size: 10px;
            font-weight: 600;
            color: #9c7765;
        }
    }

    img {
        width: 15vw;
    }

    .TVContainer {
        width: 31vw;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f8f8;
        padding: 2px 5px 2px;

        .icon {
            // margin-right: 5px;
            padding: 0 5px 0;
            border-radius: 3px;
        }
    }
}

.active {
    background-color: #0058ff;
}
</style>
